<template>
  <div>
    <simple-data-dialog
      :title="$t('tenant.userManage.role')"
      :visible.sync="roleDialogVisible"
      :size="size"
    >
      <div class="text-show">
        <div>{{ $t("tenant.userManage.telephone") }}：{{ user.telephone }}</div>
        <div>{{ $t("tenant.userManage.userName") }}：{{ user.userName }}</div>
      </div>
      <data-table
        ref="authRole"
        :table-data="dialogTableData"
        :column="column"
        :table-option="tableOption"
      />
      <div
        slot="footer"
        class="dialog_btn"
      >
        <el-button @click="roleDialogVisible=false">{{ $t('common.cancel') }}</el-button>
        <!-- <el-button @click="reset('dialog')">{{$t('common.reset')}}</el-button> -->
        <el-button
          type="primary"
          @click="submitForm"
        >{{ $t('common.ok') }}</el-button>
      </div>
    </simple-data-dialog>

  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import merchantApi from '@/api/tenant/merchant'
import SimpleDataDialog from '@/components/SimpleDataDialog'
import { mapState } from 'vuex'
export default {
  name: '',
  components: {
    DataTable,
    SimpleDataDialog
  },
  data() {
    return {
      roleDialogVisible: false,
      size: 'small',
      tableOption: {
        option: {
          showHeaderBtn: false,
          enableSelected: true
        },
        event: {
          selectionChange: this.selectionChange
        }
      },
      column: {
        // 表头
        data: [
          {
            label: this.$t('tenant.userManage.roleCode'),
            prop: 'roleCode',
            show: true
          },
          {
            label: this.$t('tenant.userManage.roleName'),
            prop: 'roleName',
            show: true
          }
        ]
      },
      dialogTableData: [],
      selectRole: [],
      user: {},
      userId: 0
    }
  },
  computed: {
    ...mapState({
      merchantCode: state => state.user.merchantCode
    })
  },
  methods: {
    show() {
      this.roleDialogVisible = true
      this.$nextTick(() => {
        this.getList()
      })
    },
    getList() {
      merchantApi.getRolesList({ merchantCode: this.merchantCode }).then(res => {
        this.dialogTableData = res.data
        this.$nextTick(() => {
          if (this.selectRole) {
            const list = []
            this.selectRole.map(v => {
              this.dialogTableData.map(item => {
                // eslint-disable-next-line eqeqeq
                if (v.roleCode == item.roleCode) {
                  list.push(item)
                }
              })
            })
            this.$refs.authRole.toggleRowSelection(list)
          }
        })
      })
    },
    submitForm() {
      // eslint-disable-next-line eqeqeq
      if (this.selectRole.length == 0) {
        this.$message.warning(this.$t('common.record'))
        return
      }
      const roleIds = []
      this.selectRole.map(item => {
        roleIds.push({ userAccount: this.userId, roleCode: item.roleCode, merchantCode: this.merchantCode })
      })
      // let data = {
      //   roleIds: roleIds,
      //   id: this.userId,
      // }
      merchantApi.saveRole(roleIds).then(res => {
        this.$message.success(this.$t('tenant.userManage.roleSuccess'))
        this.roleDialogVisible = false
        this.$emit('resetList')
      })
    },
    selectionChange(data, e) {
      this.selectRole = data
    }
  }
}
</script>

<style lang="scss" scoped>
.text-show {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px 10px 0;
}
</style>
